<template>
  <div class="index-container">
    <div class="shop-top">
      <div class="w1200">
        <div class="fr" ><router-link :to="`/shoplist`" title="融易装">
              <i class="el-icon-house" style="margin-right:5px;"></i>首页
            </router-link></div>
        <div class="fl">
           <div class="sn-quick-menu">
              <div class="login"><img v-if="info.logo" :src="info.logo.path" alt="">{{info.name?info.name:'暂未设置'}}<i class="el-icon-arrow-down el-icon--right"></i></div>
              <!-- <div class="sp-cart">客服服务<i class="el-icon-arrow-down"></i></div> -->
            </div>
        </div>
      </div>
    </div>

     <div class="header">
      <div class="headerLayout w1200">
        <div class="headerCon">
          <h1 class="mallLogo">
            <router-link :to="`/shoplist`" title="融易装">
              <img src="../img/logo.png">
            </router-link>
          </h1>
          <div class="mallSearch">
            <form action="" class="layui-form" novalidate>
              <input type="text" v-model="keyword"  class="layui-input" placeholder="搜索关键字">
              <button class="layui-btn" @click="filterPops()">
                  <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="content content-nav-base commodity-content">


      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="category-types" style="">
              <h3>全部分类</h3>
            </div>
            <div class="inner-cont2">
              <router-link :to="`/nowlist`">选材中心</router-link>
              <router-link :to="`/orderlist`">我的订单</router-link>
              <router-link :to="`/nowadderss`">地址管理</router-link>
              <router-link :to="`/nowcart`">购物车</router-link>
            </div>
          </div>
        </div>
      </div>

      
      <div class="commod-cont-wrap">
      <div class="commod-cont w1200 layui-clear">
        <section class="wrap product_detail" v-if="goodsInfo">
          <!--img:left-->
          <div class="gallery">
            <div>
              <div id="preview" class="spec-preview">
                <el-carousel :interval="5000" arrow="always" height="420px">
                  <el-carousel-item v-for="(item, index) in goodsInfo.round_imgs" :key="index">
                    <span class="jqzoom"><img :src="item.image_path" /></span>
                  </el-carousel-item>
                </el-carousel> 
              </div>
            </div>
          </div>
          <!--text:right-->
          <div class="rt_infor">
            <!--lt_infor-->
            <div class="goods_infor">
            <h2>{{goodsInfo.product_title}}</h2>
            <ul>
              <li>
              <dl class="horizontal">
                <dt>底价：</dt>
                <dd>￥<strong class="rmb_icon univalent">{{goodsInfo.cost_price}}</strong></dd>
              </dl>
              </li>
              <li>
              <dl class="horizontal">
                <dt>售价：</dt>
                <dd><time>￥{{goodsInfo.price}}</time> <span>原价：</span><time>￥{{goodsInfo.primary_price}}</time></dd>
              </dl>
              </li>
              <dl class="horizontal">
                <dt>销量：</dt>
                <dd><em>{{goodsInfo.volume}}</em>份</dd>
              </dl>
              </li>
              <dl class="horizontal">
                <dt>店铺：</dt>
                <dd><em>{{goodsInfo.store_name}}</em></dd>
              </dl>
              </li>
              <!-- <li class="statistics">
              <dl class="vertical">
                <dt>月销量</dt>
                <dd>20</dd>
              </dl>
              <dl class="vertical">
                <dt>累计评论</dt>
                <dd>198</dd>
              </dl>
              <dl class="vertical">
                <dt>关注</dt>
                <dd>230</dd>
              </dl>
              </li>-->
              <li v-for="(items,index1) in goodsInfo.parameter" :key="index1"> 
              <dl class="horizontal horizontal_attr">
                <dt>{{items.specifs}}：</dt>
                <dd style="height:42px"></dd>
                <dd>
                  <span class="spanchind" v-for="(item,index2) in items.child" @click="checkedEvent(item,index1)" :class="{'checked':item.checked}">{{item.specif}}</span>
                </dd>
              </dl>
              </li>
              </li>
              <li style="margin-top:20px;">
              <dl class="horizontal horizontal_attr">
                <dt>数量：</dt>
                <dd>
                <input type="button" value="-" class="jj_btn" @click="minusSizeCart"/>
                <input type="text" v-model="sizeNum" readonly class="num"/>
                <input type="button" value="+" class="jj_btn" @click="addSizeCart"/>
                <span>库存：{{goodsInfo.stockNum}}件</span>
                </dd>
              </dl>
              </li>
              <li class="last_li">
                <input type="button" value="进入店铺"  @click="toPage(goodsInfo.store_id)" class="buy_btn"/>
                <input type="button" value="立即购买" @click="buy()" class="buy_btn"/>
                <input type="button" value="加入购物车" @click="addCart()" class="add_btn"/>
              </li>
            </ul>
            </div>
          </div>
        </section>
         <div class="layui-clear datails-content" v-if="goodsInfo">
            <div class="aside">
              <h4>热销推荐</h4>
              <div class="item-list">
                <div class="item" v-for="(item,index) in goodsInfo.recommendProducts" :key="index" @click="todeatil(item.id)">
                  <img :src="item.main_imgurl">
                  <p><span>{{item.product_title}}</span></p>
                  <p><span class="pric">￥{{item.price}}</span></p>
                </div>
             </div>
            </div> 
            <div class="detail">
              <h4>商品详情</h4>
              <div class="item">
                <div v-html="goodsInfo.details"></div>
              </div>
            </div>
      </div>
       

      </div>
    </div>
  </div>

  
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">满99元全场免邮</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">                                     
      <!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
      <p class="coty">融易装版权所有 &copy; 2012-2020</p>
    </div>
  </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: '小刀',
        info: {},
        mobile: '',
        product_id:'',
        goodsInfo: null,
        bannerIndex: 0,
        // 规格
        sizePop: false,
        sizeImage: null,   // 规格图片
        sizePrice: null,   // 规格价格
        sizeNum: 1,
        // 清单
        cart: null,
        child:'',
        is_show_model: false,//是否显示分享模态窗
        shaegood:'',
        specif:'',
        html :'',
        sku_id:'',
        keys :[],
        sizeNum:1,
        keyword:'',
      }
    },
     mounted() {
            this.info = JSON.parse(localStorage.getItem('info'))
            this.mobile = localStorage.getItem('mobile')
            this.product_id = this.$route.query.product_id
            this.getData()
        },
    methods: {
      filterPops(){
        this.$router.push({name:'nowlist',query:{keyword:this.keyword}})
      },
    toPage(id){
        this.$router.push({name:'shop',query:{id:id}})
    },
    todeatil(id){
       this.product_id = id
       this.getData()
    },  
      //选择规格
		checkedEvent(data,index1){
			if(data.checked){
				this.$set(data,"checked",false);
				this.sku_id = "";
			}else{
				this.goodsInfo.parameter[index1].child.map(item=>{
					this.$set(item,"checked",false)
				})
				this.$set(data,"checked",true)
				this.get_keys()
			}
		},
		get_keys(){
			let keys = [];
			this.goodsInfo.parameter.map((item1,index1)=>{
				let checkedItem = item1.child.find(r=>r.checked)
				if(checkedItem){
					keys.push({
						key:item1.specifs,
						value:checkedItem.specif
					})
				}
			})
			this.keys = keys
			let sku_lst = [];
			if(this.goodsInfo && this.goodsInfo.sku_lst){
				sku_lst = this.goodsInfo.sku_lst
			}
			for(let i = 0;i<sku_lst.length; i++){
					if(JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)){
						this.sku_id= sku_lst[i].sku_id
						this.goodsInfo.price = sku_lst[i].price
						this.goodsInfo.cost_price = sku_lst[i].cost_price
						this.goodsInfo.primary_price = sku_lst[i].primary_price
						this.goodsInfo.stockNum = sku_lst[i].num
					}
				console.log(JSON.stringify(sku_lst[i].attribute))
				console.log(JSON.stringify(keys),123)
			}
				
    },
    // 添加数量
		addSizeCart() {
			this.sizeNum++
		},
		
		// 删减清单-规格弹窗
		minusSizeCart() {
			if (this.sizeNum > 1) this.sizeNum--
		},
      // 获取商品详情
      getData() {
        this.$http.post('/api/admin/shopweb/product/detail',{product_id:this.product_id}).then(res=>{
					if(res.code==1){
						 let data = res.data
						// 处理数据
            let goodsInfo = data
            if (goodsInfo.specs_type == 2) {
							 goodsInfo.stockNum = goodsInfo.num
						}
						// 单规格
						else {
							goodsInfo.price = goodsInfo.sku_lst[0].price
							goodsInfo.cost_price = goodsInfo.sku_lst[0].cost_price
							goodsInfo.primary_price = goodsInfo.sku_lst[0].primary_price
							goodsInfo.stockNum = goodsInfo.sku_lst[0].num
							goodsInfo.sizeId = goodsInfo.sku_lst[0].sku_id
						}
            this.goodsInfo = goodsInfo
            this.goodsInfo.details = this.goodsInfo.details.replace(/<img/g,"<img style='width:100%;height:auto;'");
					}
				})
      },
      // 立即购买
		buy(e) {
			let stockNum = 0;
			if (this.goodsInfo.specs_type==1 && this.goodsInfo.sku_lst.length > 0) {
				//单
				this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
			}
			if (this.goodsInfo.specs_type && !this.sku_id) {
					this.$message({
            message: '请先选择规格',
            type: 'warning'
          })
				return;
			}
			if (this.goodsInfo.specs_type) {
				let result = this.goodsInfo.sku_lst.find(r => r.sku_id == this.sku_id);
				if (result) {
					stockNum = result.num;
				}
			} else {
				stockNum = this.goodsInfo.stockNum;
			}
			// 先判断库存是否足够
			if (stockNum < this.sizeNum) {
				this.$message({
            message: '库存不足',
            type: 'warning'
        })
				return;
			}
			console.log(this.goodsInfo, '商品信息');
        let params = {
          origin_type: 2,
          cart_ids: '',
          goods: {
            sku_id: this.sku_id,
            pack_id: '',
            num: this.sizeNum
          }
        };
        
        localStorage.setItem('params',JSON.stringify(params))
        this.$router.push({name:'order',query:{Nocart:1}})
    },
    // 添加清单
		addCart(e) {
			let stockNum = 0;
			if (this.goodsInfo.specs_type == 1 && this.goodsInfo.sku_lst.length > 0) {
				//单
				this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
			}
		    console.log(this.goodsInfo,this.sku_id)
			if (this.goodsInfo.specs_type && !this.sku_id) {
          this.$message({
            message: '请选择规格',
            type: 'warning'
          })  
				return
			}
			if (this.goodsInfo.specs_type) {
				let result = this.goodsInfo.sku_lst.find(r => r.sku_id == this.sku_id);
				if (result) {
					stockNum = result.num;
				}
			} else {
				stockNum = this.goodsInfo.stockNum;
			}
			// 先判断库存是否足够
			if (stockNum < this.sizeNum) {
        this.$message({
            message: '库存不足',
            type: 'warning'
        })
				return
      }
      this.$http.post('/api/admin/shopweb/cart/add',{type:1, product_id: this.product_id, sku_id: this.sku_id, num: this.sizeNum}).then(res=>{
				if(res.code==1){
           this.$message({
                message: '添加购物车成功',
                type: 'warning'
            })
				} else {
          this.$message({
                message: res.msg,
                type: 'warning'
           })
				}
			});
		},
    
    }
  }
</script>
<style lang="less" scoped>
  & /deep/ .content{
    padding: 0 !important;
  }
  @import '../css/index.less';
</style>
